<template>
  <div class="supplierUpload">
    <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
      <el-row>
        <goodsForm :formList="form.list" @input="changelist" @change="changelist" @areachange="changearea" />
        <el-col :span="24" class="SearchBtn">
          <el-button type="primary" @click="submitForm" plain>提交信息</el-button>
          <el-button type="warning" @click="resetForm" plain>清空输入</el-button>
          <el-button type="info" @click="returnTo" plain>返回首页</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import { supplierAdd, supplierEdit } from "../../../http/apis/goodsApi/supplier.js"
  import goodsForm from "../../../components/GoodsComponent/GoodsForm.vue";
  import { provinceAndCityDataPlus, CodeToText } from "element-china-area-data";
  import { mapState } from 'vuex';
  export default {
    components: {
      goodsForm,
    },
    props: {},
    data() {
      return {
        form: {
          list: [
            {
              id: 0,
              name: "合作情况",
              type: "select",
              text: "请选择合作情况",
              data: "",
            },
            {
              id: 1,
              name: "供应商名称",
              data: ''
            },
            {
              id: 2,
              name: "联系人",
              data: "",
            },
            {
              id: 3,
              name: "传真",
              data: "",
            },
            {
              id: 4,
              name: "电话",
              data: "",
            },
            {
              id: 5,
              name: "手机号",
              data: "",
            },
            {
              id: 6,
              name: "微信",
              data: "",
            },
            {
              id: 7,
              name: "QQ",
              data: "",
            },
            {
              id: 8,
              name: "邮箱",
              data: "",
            },
            {
              id: 9,
              name: "网址",
              data: "",
            },
            {
              id: 10,
              name: "所在地区",
              type: "area",
              options: provinceAndCityDataPlus, //所在地区省市
              selectedOptions: [],
            },
            {
              id: 11,
              name: "地址",
              data: "",
            },
            {
              id: 12,
              name: "备注",
              data: "",
              textarea: "textarea"
            },
          ],
          pro: '',
          city: '',
        },
      };
    },
    watch: {},
    computed: {
      ...mapState('goodsStore', ['ADType']),
    },
    methods: {
      // 获取当前日期
      getDate() {
        let time = new Date()
        let day = time.getDate()
        let month = time.getMonth() + 1
        let year = time.getFullYear()
        return (year + '-' + month + '-' + day)
      },
      // 修改表单数据
      changelist(list) {
        this.form.normalForm = list
      },
      // 修改地区
      changearea(value) {
        this.form.pro = CodeToText[value[0]]
        this.form.city = CodeToText[value[1]]
      },

      // 提交
      submitForm() {
        let data =
        {
          "su_pro": this.form.pro,//省份
          "su_city": this.form.city,//城市
          "su_cooperation": parseInt(this.form.list[0].data),//合作情况
          "su_name": this.form.list[1].data,//供应商名称
          "su_contact": this.form.list[2].data,//联系人
          "su_phone": this.form.list[4].data,//电话
          "su_tel": this.form.list[5].data,//手机号
          "su_qq": this.form.list[7].data,//QQ号
          "su_fax": this.form.list[3].data,//传真
          "su_we": this.form.list[6].data,//微信号
          "su_email": this.form.list[8].data,//邮箱
          "su_web": this.form.list[9].data,//网址
          "su_address": this.form.list[11].data,//地址
          "su_remark": this.form.list[12].data,//备注
          "su_add_date": this.getDate()//创建时间
        }
        console.log(data)
        if (this.ADType == 'add') {
          supplierAdd(data)
            .then((res) => {
              if (res.data.code == "200") {
                this.$message({
                  type: "success",
                  message: "信息添加成功",
                  showClose: true,
                })
                this.$router.push('/goods/supplier/supplierMsg')
              }
            })
            .catch((err) => {
              console.log("请求失败", err);
              this.$message({
                type: "error",
                message: "请求失败，请稍后再试",
                showClose: true,
              });
            });
        } else if (this.ADType == 'edit') {
          console.log(data)
          supplierEdit(data)
            .then((res) => {
              console.log("成功请求:", res.data.code);
              if (res.data.code == "200") {
                this.$message({
                  type: "success",
                  message: "信息修改成功",
                  showClose: true,
                })
                this.$router.push('/goods/supplier/supplierMsg')
              }
            })
            .catch((err) => {
              console.log("请求失败", err);
              this.$message({
                type: "error",
                message: "请求失败，请稍后再试",
                showClose: true,
              });
            });
        }
      },
      // 清空条件
      resetForm() {
        for (let key in this.form.list) {
          this.form.list[key].data = ''
        }
        this.form.list[10].selectedOptions = ''
        this.formpro = '',
          this.city = ''
      },
      // 返回首页
      returnTo() {
        this.$confirm('即将返回首页，所做的操作无法保存, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.$router.push('/goods/supplier/supplierMsg')
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消跳转",
            showClose: true,
          });
        });
      }
    },
    created() {
      if (this.ADType == "edit") {
        let msg = this.$route.query.editmsg
        this.form.pro = msg.su_pro,//省份
          this.form.city = msg.su_city,//城市
          this.form.list[0].data = msg.su_cooperation,//合作情况
          this.form.list[1].data = msg.su_name,//供应商名称
          this.form.list[2].data = msg.su_contact,//联系人
          this.form.list[4].data = msg.su_phone,//电话
          this.form.list[5].data = msg.su_tel,//手机号
          this.form.list[7].data = msg.su_qq,//QQ号
          this.form.list[3].data = msg.su_fax,//传真
          this.form.list[6].data = msg.su_we,//微信号
          this.form.list[8].data = msg.su_email,//邮箱
          this.form.list[9].data = msg.su_web,//网址
          this.form.list[11].data = msg.su_address,//地址
          this.form.list[12].data = msg.su_remark//备注
      }
    },
    mounted() { },
  };
</script>
<style lang="scss" scoped>
  .supplierUpload {
    margin-top: 50px;
  }

  .el-row {
    margin-left: 10%;
  }

  .SearchBtn {
    margin-left: -10%;
    text-align: center;
  }

  button {
    margin: 50px 100px 0 0;
  }
</style>